<template>
	<view class="container">
		<view class="pl32">
			<com-head textTit="项目" :typeVal="1" :scrollTop="scrollTop"></com-head>
		</view>
		
		
		<!-- 搜索 -->
		<view class="field">
			<view class="serchBox">
				<u-icon name="search" color="#999999" size="30"></u-icon>
				<input type="text" @input="serchList()" v-model="name" placeholder="搜索项目名称" placeholder-style="color:#999999;font-size:24rpx"/>
			</view>
			<!-- <view class="tabList" >
			  <scroll-view scroll-x class="classifyList" 
			  :scroll-with-animation="true"
			  :scroll-into-view="`nav${activeIndex - 1}`"
			  >
			      <view class="lsit" :id="`nav${index}`" @click="tabsClick(ele,index)" style="display:inline-block" :class="activeIndex == index ? 'active' : ''" v-for="(ele,index) in cateList"  :key="index">
					  {{ele.name}}
				  </view>
			    </scroll-view>
			</view> -->
			<view class="tabList">
				<!-- <view class="lsit" :class="screenAll ? 'active' : '' " @click="tabsClick(0)" >
					全部
				</view>
				<view class="lsit" :class="activePrice != 0 ? 'active' : '' " @click="tabsClick(1)" >
					项目价格
					<view class="SJX">
						<view class="up-triangle" :class="activePrice == 1 ? 'upChecked' : ''"></view>
						<view class="down-triangle" :class="activePrice == 2 ? 'downChecked' : ''"></view>
					</view>
				</view>
				<view class="lsit" :class="salesIndex != 0 ? 'active' : '' " @click="tabsClick(2)" >
					销量
					<view class="SJX">
						<view class="up-triangle" :class="salesIndex == 1 ? 'upChecked' : ''"></view>
						<view class="down-triangle" :class="salesIndex == 2 ? 'downChecked' : ''"></view>
					</view>
				</view> -->
				<view class="lsit" :class="sales ? 'active' : '' " @click="tabsClick(3)" >
					筛选 <image class="lsit-img" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/sx.png"></image>
				</view>
			</view>
		</view>
		
		<view class="pl32">
			<view class="projectList">
				<view class="list" v-for="item in list" :key="item">
					<image :src="item.pic" mode="aspectFill"></image>
					<view class="info">
						<view class="infoT">
							<view class="name">{{item.name}}</view>
							<view class="num">已售{{item.sold_num}}件</view>
						</view>
						<!-- <view class="infoM">
							<view class="left">
								<view class="">项目时长：{{item.duration}}分钟</view>
								<view class="">{{item.tags}}</view>
							</view>
							<view class="iconfont " @click="chioseProject(item)" :class="item.isCheck ? 'icon-a-xingzhuang1' : 'icon-weixuanzhong' "></view>
						</view> -->
						<view class="t3">
							<text v-for="row in item.tags">{{row.tags.name}}</text>
						</view>
						<view class="t2"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/shijian223.png"></image>{{item.duration}}分钟</view>
						
						<view class="price" >
							<text>¥</text> {{ userInfo.vip_id <= 0 ? item.price : item.vip_price}}
						</view>
						
						<view class="btnP" @click="chioseProject(item)">
							<image v-if="item.isCheck" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/dui.png"></image>
							<image v-else src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/xuanze.png"></image>
						</view>
					</view>
				</view>
				<u-loadmore margin-top="60" margin-bottom="30" :status="status" />
			</view>
		</view>
		
		
		<!-- 筛选弹窗 -->
		
		<screenPop :show="screenShow" ref="screenRef" @clickHandle="clickHandle" @clickSubmit="clickSubmit"></screenPop>
	</view>
</template>
<script>
	import screenPop from '@/components/screen/project.vue'
	export default {
		components:{
			screenPop
		},
		data() {
			return {
				name:'',
				isCheck:false,
				cateList:[],
				activeIndex:0,
				isCheck:false,
				list:[],
				status:'loading',
				total:0,
				page:1,
				card_id:0,
				screenAll: true,
				activePrice: 0,
				salesIndex: 0,
				sales: false,
				scrollTop: 0,
				screenShow:false,
				objItem: {},
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad() {
			this.getCateList()
		},
		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++;
				this.getCateList();
			}
		},
		methods: {
			clickHandle() {
				this.screenShow = false
			},
			clickSubmit(e) {
				this.objItem = e
				this.screenShow = false
				
				this.list = []
				this.page=1
				this.getProjectList()
			},
			// 选择项目
			chioseProject(item){
				if(item.isDefault){
					this.utlis.Toast("此项目不可取消")
					return
				}else{
					let arr = []
					item.isCheck = !item.isCheck
					this.list.forEach(ele=>{
						if(ele.isCheck && !ele.isDefault){
							arr.push(ele)
						}
						this.$u.vuex("chioseProjects",arr)
					})
					this.$forceUpdate()
				}
			},
			// 搜索商品
			serchList(){
				if(this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					this.list = []
					this.page=1
					this.getProjectList()
				}, 800);
			},
			// 项目分类切换
			tabsClick(type){
				// screenAll: true, 全部
				// activePrice: false, // 价格
				// salesIndex: false, // 销量
				// sales: false  筛选
				switch(type){
					case 0:
						this.screenAll = true
						this.activePrice = 0
						this.salesIndex = 0
						this.sales = false
						break;
					case 1:
						this.screenAll = false
						this.salesIndex = 0
						if (this.activePrice == 0) {
							this.activePrice = 1
						} else if (this.activePrice == 1) {
							this.activePrice = 2
						} else if (this.activePrice == 2){
							this.activePrice = 1
						}
						break;
					case 2:
						this.screenAll = false
						this.activePrice = 0
						if (this.salesIndex == 0) {
							this.salesIndex = 1
						} else if (this.salesIndex == 1) {
							this.salesIndex = 2
						} else if (this.salesIndex == 2){
							this.salesIndex = 1
						}
						break;
					case 3:
						this.$refs.screenRef.opens(this.objItem)
						this.screenAll = false
						this.screenShow = true
						return;
					default:
						break;
				}
				
				this.list = []
				this.page=1
				// this.activeIndex = index
				// this.card_id = ele.id
				this.getProjectList()
			},
			// 获取服务项目列表
			async getProjectList(){
				let pls = Object.assign({},{
						cate_id:this.card_id,
						page:this.page,
						name:this.name,
						store_id:this.store_id,
					}, this.objItem)
				let {data,code} = await this.$u.api.getProject(pls);
				if(this.page == 1 && !data.data.lenght){
					this.status = 'nomore';
				}
				this.list = [...this.list, ...data.data];
				this.list.forEach((ele)=>{
					// console.log(2222222222)
					this.makeProject.forEach(item=>{
						// console.log(1111111111)
						// console.log(item,"顶顶顶顶顶顶顶")
						if(item.isDefault && (ele.id == item.id)){
							// console.log("99999999")
							ele.isCheck = true
							ele.isDefault = true
						}else{
							ele.isCheck = false
						}
					})
				})
				if(this.chioseProjects.length){
					this.list.forEach((ele)=>{
						this.chioseProjects.forEach(item=>{
							if(ele.id == item.id){
								ele.isCheck = true
							}
						})
					})
				}
				this.total = data.total;
				if (this.total <= this.list.length) this.status = 'nomore';
				else this.status = 'loading';
			},
			// 获取项目分类
			async getCateList(){
				let {data,code} = await this.$u.api.getCate();
				let obj={
					name:'全部',
					id:0,
				}
				this.cateList = [obj,...data]
				this.getProjectList()
				console.log(this.cateList,"this.cateList")
			},
			chioseTab(index){
				this.activeIndex = index
			}
		}
	}
</script>
<style lang="scss" scoped >
.pl32{
	padding: 0 32rpx;
}

.container{
	padding-top: 50rpx;
	.icon-weixuanzhong{
		color: #979797;
		font-size: 42rpx;
	}
	.icon-a-xingzhuang1{
		color: rgba(209,184,125,1);
		font-size: 42rpx;
	}
	u-icon{
		margin-right: 15rpx;
	}
	.classifyList{
		white-space: nowrap;
		display: flex;
		.list{
			padding: 10rpx 30rpx;
			background: rgba(194,194,194,.1);
			border-radius: 68rpx;
			text-align: center;
			color: #666666;
			font-size: 24rpx;
			margin-right: 30rpx;
		}
		.active{
			color: #007664;
			background: rgba(136,29,3,.1);
		}
	}
	.field{
		width: 750rpx;
		padding-top: 20rpx;
		// position: fixed;
		// top: 180rpx;
		// left: 0;
		// background-color:#F6F7FA ;
		z-index: 9999;
		// margin-bottom: 20rpx;
	}
	.projectList{
		width: 690rpx;
		margin-top: 25rpx;
		.list{
			background-color: #FFFFFF;
			padding-right: 24rpx;
			display: flex;
			justify-content: space-between;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			padding: 24rpx;
			image{
				width: 188rpx;
				height: 188rpx;
				flex: none;
				margin-right: 32rpx;
				border-radius: 8rpx;
			}
			.info{
				width: 422rpx;
				position: relative;
				.btnP{
					position: absolute;
					bottom: 0;
					right: -30rpx;
					image{
						width: 110rpx;
						height: 48rpx;
					}
				}
				.infoM{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 58rpx;
					margin-bottom: 27rpx;
					.left{
						color: rgba(7,21,41,.5);
						font-size: 20rpx;
						view{
							margin-bottom: 4rpx;
						}
					}
				}
				.price{
					color: #007664;
					font-size: 32rpx;
					margin-top: 5rpx;
					text{
						font-size: 24rpx;
						margin-right: 5rpx;
					}
				}
				.infoT{
					width: 422rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					// margin: 29rpx 0 9rpx 0;
					.name{
						width: 75%;
						font-size: 26rpx;
						color: #071529;
						line-height: 37rpx;
						overflow: hidden;
					  white-space: nowrap;
					  text-overflow: ellipsis;
					}
					.num{
						color: #E8C778;
						font-size: 20rpx;
						// border: 1rpx solid;
						position: absolute;
						right: 10rpx;
					}
				}
				.t2{
					display: inline-block;
					padding: 0 10rpx;
					height: 28rpx;
					line-height: 28rpx;
					background: #495057;
					font-size: 16rpx;
					font-weight: 400;
					text-align: left;
					color: #E8BC88;
					line-height: 28rpx;
					margin-bottom: 8rpx;
					text-align: center;
					border-radius: 4rpx  4rpx  4rpx  4rpx;
					margin-top: 25rpx;
					image{
						width: 16rpx;
						height: 16rpx;
						position: relative;
						top: 3rpx;
						margin-right: 6rpx;
					}
				}
				.t3{
					margin-top: 10rpx;
					text{
						border-radius: 4rpx  4rpx  4rpx  4rpx;
						padding: 7rpx 12rpx;
						font-size: 16rpx;
						color: #E8C778;
						border: 1rpx solid #E8C778;
						margin-right: 15rpx;
						border-radius: 4rpx;
					}
				}
			}
		}
	}
	.tabList{
		display: flex;
		// align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		// padding-bottom: 10rpx;
		width: 100%;
		.lsit{
			margin-right: 30rpx;
			border-radius: 68rpx;
			color: #4D5562;
			font-size: 28rpx;
			position: relative;
			text-align: right;
			flex: 1;
			&-img{
				width: 26rpx;
				height: 26rpx;
				position: relative;
				top: 4rpx;
				margin-left: 8rpx;
			}
			.SJX{
				position: absolute;
				right: -30rpx;
				top: 10rpx;
				.up-triangle {
				  width: 0;
				  height: 0;
				  border-left: 5px solid transparent; /* 左侧边框透明 */
				  border-right: 5px solid transparent; /* 右侧边框透明 */
				  border-bottom: 5px solid #4D5562; /* 下方边框为三角形颜色 */
				  margin-bottom: 5rpx;
				}
				.down-triangle {
				  width: 0;
				  height: 0;
				  border-left: 5px solid transparent; /* 左侧边框透明 */
				  border-right: 5px solid transparent; /* 右侧边框透明 */
				  border-top: 5px solid #4D5562; /* 上方边框为三角形颜色 */
				}
				.upChecked{
					border-bottom: 5px solid #007664; /* 下方边框为三角形颜色 */
				}
				.downChecked{
					border-top: 5px solid #007664; /* 下方边框为三角形颜色 */
				}
			}
		}
		.active{
			// background-color: rgba(136,29,3,.1);
			color: #007664;
		}
	}
	.serchBox{
		width: 686rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		line-height: 72rpx;
		height: 72rpx;
		background: rgba(255,255,255,0.4);
		border-radius: 60rpx;
		box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0,0,0,0.07); 
		display: flex;
		align-items: center;
		margin: 0 auto 30rpx;
		input{
			color: #333333;
			padding-left: 20rpx;
		}
	}
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
